<template>
  <div class="pagination-container">
    {{ currentPage }}
    <button 
      class="pagination-btn"
      :disabled="currentPage <= 1"
      @click="handlePageChange(currentPage - 1)"
    >
      上一页
    </button>

    <!-- 修改后的页码显示逻辑 -->
    <template v-for="(page, index) in visiblePages" :key="index">
      <button
        v-if="typeof page === 'number'"
        class="pagination-btn"
        :class="{ active: page === currentPage }"
        @click="handlePageChange(page)"
      >
        {{ page }}
      </button>
      <span v-else class="ellipsis">{{ page }}</span>
    </template>

    <button
      class="pagination-btn"
      :disabled="currentPage >= totalPages"
      @click="handlePageChange(currentPage + 1)"
    >
      下一页
    </button>

    <div class="page-jump">
      到第
      <input
        type="number"
        min="1"
        :max="totalPages"
        v-model.number="jumpPage"
      />
      页
      <button @click="handleJump">确定</button>
    </div>

    <div class="total-pages">共 {{ totalPages }} 页</div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue';

const props = defineProps({
  currentPage: {
    type: Number,
    default: 1
  },
  total: {
    type: Number,
    required: true
  },
  pageSize: {
    type: Number,
    default: 10
  }
});

const emit = defineEmits(['update:currentPage', 'change']);

const jumpPage = ref(null);
const totalPages = computed(() => Math.ceil(props.total / props.pageSize));

// 修改后的可见页码计算逻辑
const visiblePages = computed(() => {
  const pages = [];
  const alwaysShowThreshold = 7; // 总页数超过该值时启用特殊显示逻辑
  
  if (totalPages.value <= alwaysShowThreshold) {
    // 显示所有页码
    for (let i = 1; i <= totalPages.value; i++) {
      pages.push(i);
    }
  } else {
    // 始终显示前5页
    for (let i = 1; i <= Math.min(5, totalPages.value); i++) {
      pages.push(i);
    }

    // 添加分隔符
    if (currentPage.value > 5 + 1 && currentPage.value < totalPages.value - 1) {
      pages.push('...');
    }

    // 显示当前页（当在中间区域时）
    if (
      currentPage.value > 5 &&
      currentPage.value < totalPages.value - 1
    ) {
      pages.push(currentPage.value);
    }

    // 添加最后的分隔符和最后一页
    if (totalPages.value > 5 + 1) {
      if (currentPage.value < totalPages.value - 1) {
        pages.push('...');
      }
      pages.push(totalPages.value);
    }
  }
  return pages;
});

// 保持原有的处理函数
const handlePageChange = (newPage) => {
  const validPage = Math.max(1, Math.min(newPage, totalPages.value));
  if (validPage !== props.currentPage) {
    emit('update:currentPage', validPage);
    emit('change', { page: validPage, pageSize: props.pageSize });
  }
};

const handleJump = () => {
  if (!jumpPage.value) return;
  handlePageChange(parseInt(jumpPage.value));
  jumpPage.value = null;
};

watch(totalPages, (newVal) => {
  if (props.currentPage > newVal) {
    handlePageChange(newVal);
  }
});
</script>

<style scoped>
/* 新增省略号样式 */
.ellipsis {
  padding: 6px 12px;
  user-select: none;
}

/* 保持原有其他样式不变 */
.pagination-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
}

.pagination-btn {
  padding: 6px 12px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  border-radius: 4px;
}

.pagination-btn:hover:not(:disabled) {
  background: #f0f0f0;
}

.pagination-btn.active {
  background: #409eff;
  color: white;
  border-color: #409eff;
}

/* 其他样式保持原样... */
</style>